{{extend 'layout.html'}}

<script type="text/javascript"> 
// When the document is ready set up our sortable with it's inherant function(s) 
$(document).ready(function() { 
  $("#test-list").sortable({ 
    handle : '.handle', 
    update : function () { 
      var order = $('#test-list').sortable('serialize');
      //alert(order);
      var url = "{{=URL(r=request, f='ajax_sortable_react') }}" +'/?'+order;
      alert(url);
      //$("#info").load(url);
      //web2py_ajax_page(method,action,data,target)
      web2py_ajax_page('get',url, null, "info");
      /*
                    $.get(url, order,
                          function(data){
                               alert('Data Loaded: ' + data);
                             }
                       );
    */
      
    } 
  }); 
}); 
</script>
<!--
http://www.wil-linssen.com/musings/entry/extending-the-jquery-sortable-with-ajax-mysql/
-->
<pre> 
    <div id="info">Waiting for update</div> 
</pre> 
<ul id="test-list"> 
  <li id="listItem_1"> 
    <img src="arrow.png" alt="move" width="16" height="16" class="handle" /> 
    <strong>Item 1 </strong>with a link to <a href="http://www.google.co.uk/" rel="nofollow">Google</a> 
  </li> 
  <li id="listItem_20" class="handle"> 
    <img src="arrow.png" alt="move" width="16" height="16"  /> 
    <strong>Item 2</strong>
    <div> labas <span>rytas </span></div>
  </li> 
  <li id="listItem_3"> 
    <img src="arrow.png" alt="move" width="16" height="16" class="handle" /> 
    <strong>Item 3</strong> 
  </li> 
  <li id="listItem_4"> 
    <img src="arrow.png" alt="move" width="16" height="16" class="handle" /> 
    <strong>Item 4</strong> 
  </li> 
</ul> 
<form action="{{=URL(r=request, f='ajax_sortable_react') }}" method="post" name="sortables"> 
  <input type="hidden" name="test-log" id="test-log" /> 
</form>
